<template>
  <el-card style="height: auto;">
    <div id="head_card">
      <div style="width: 20%;height: 100%;">
        <el-avatar :size="100" style="margin-top: 15%"></el-avatar>
        <h1 style="margin-top: 5%">{{ agent.agentName }}</h1>
        <h1 style="margin-top: 5%">{{ agent.agentEmail }}</h1>
      </div>
    </div>
    <el-card style="height: auto;margin-top: 3%; background-color: aliceblue;">
      <div style="height: 600px;width: 100%">
        <div ref="top5_app" style="height: 100%;width: 45%;float: left;"></div>
        <div ref="time_total" style="height: 100%;width: 55%;float: left"></div>
      </div>
      <div style="width: 100%;height: 1000px;margin-top: 3%">
        <div style="width: 30%;height: 100%;float:left;">
          <div ref="verb_type" style="height: 50%;width: 100%"></div>
          <div ref="object_type" style="height: 50%;width: 100%"></div>
        </div>
        <div style="width: 65%;height: 100%;float: left">
          <el-card style="width: 100%;height: 30%">
            <el-table
              :data="accounts"
              stripe
              height="230px"
              style="width: 100%">
              <el-table-column
                prop="accountName"
                label="用户名"
              >
              </el-table-column>
              <el-table-column
                prop="accountId"
                label="账号"
              >
              </el-table-column>
              <el-table-column
                prop="accountHomepage"
                label="主页"
              >
              </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next"
                :total="this.totalElements">>
              </el-pagination>
            </div>
          </el-card>
          <div style="width: 100%;height: 65%;margin-top: 5%">
            <div style="width: 50%;height: 100%;float: left" ref="verb_top5"></div>
            <div style="width: 50%;height: 100%;float: left" ref="object_top5"></div>
          </div>
        </div>
      </div>
    </el-card>
  </el-card>
</template>
<script>
  export default {
    mounted: function () {
      this.getAgent()
      this.getAccount()
      this.initTop5App()
      this.initTimeTotal()
      this.getType()
      this.initVerbTop5()
      this.initObjectTop5()
    },
    data() {
      return {
        agent: {},
        accounts: [],
        currentPage: 1,
        pageSize: 10,
        totalElements: 0,
        topAPP: [],
        verbType: {},
        objectType: {},
        verbTop5: {},
        objTop5: {},
        count: {}
      }
    },
    methods: {
      initTop5App() {
        let app = this;
        let url = "/agent/behavior/topApp"
        this.$axios.get(url, {
          params: {
            agentOpenid: this.$route.query.id
          }
        }).then(successResponse => {
          let myChart = app.$echarts.init(this.$refs.top5_app);
          this.topAPP = successResponse.data
          var option;

          option = {
            series: [{
              type: 'treemap',
              data: this.topAPP
            }]
          };

          option && myChart.setOption(option);

        }).catch(failResponse => {
        })
      },
      initTimeTotal() {
        let app = this;
        let url = "/agent/behavior/count"
        this.$axios.get(url, {
          params: {
            agentOpenid: this.$route.query.id
          }
        }).then(successResponse => {
          this.count = successResponse.data
          let myChart = app.$echarts.init(this.$refs.time_total);
          var option;

          option = {
            title: {
              text: '一天行为数据总数分布',
              left: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: this.count.times
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value}'
              },
              axisPointer: {
                snap: true
              }
            },
            series: [
              {
                type: 'line',
                smooth: true,
                data: this.count.data,
                markArea: {
                  itemStyle: {
                    color: 'rgba(255, 173, 177, 0.4)'
                  },
                  data: []
                }
              }
            ]
          };

          option && myChart.setOption(option);
        }).catch(failResponse => {
        })
      },

      initVerbType() {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.verb_type);
        var option;
        option = {
          title: {
            left: 'center',
            text: 'verb类型统计'
          },
          radar: {
            // shape: 'circle',
            indicator: this.verbType.indicator
          },
          series: [{
            name: 'VERB',
            type: 'radar',
            data: [
              {
                value: this.verbType.value,
                name: 'VERB'
              }
            ]
          }]
        };

        option && myChart.setOption(option);
      },
      initObjectType() {
        let app = this;
        let myChart = app.$echarts.init(this.$refs.object_type);
        var option;
        option = {
          title: {
            left: 'center',
            text: 'object类型统计'
          },
          radar: {
            // shape: 'circle',
            indicator: this.objectType.indicator
          },
          series: [{
            name: 'Object',
            type: 'radar',
            data: [
              {
                value: this.objectType.value,
                name: 'Object'
              }
            ]
          }]
        };

        option && myChart.setOption(option);
      },
      getType() {

        let that = this
        let url = "/agent/behavior/verbType"
        this.$axios.get(url, {
          params: {
            agentOpenid: this.$route.query.id,
          }
        }).then(successResponse => {
          this.verbType = successResponse.data.verb
          this.objectType = successResponse.data.object
          this.initVerbType()
          this.initObjectType()

        }).catch(failResponse => {
        })
      },

      initVerbTop5() {
        let url = "/agent/behavior/verbTop"
        this.$axios.get(url, {
          params: {
            agentOpenid: this.$route.query.id
          }
        }).then(successResponse => {
          this.verbTop5 = successResponse.data
          let myChart = this.$echarts.init(this.$refs.verb_top5);
          var option;

          option = {
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
            },
            legend: {
              data: this.verbTop5.verbs
            },
            series: [
              {
                name: '漏斗图',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: [
                  {value: 60, name: this.verbTop5.verbs[4]},
                  {value: 40, name: this.verbTop5.verbs[3]},
                  {value: 20, name: this.verbTop5.verbs[2]},
                  {value: 80, name: this.verbTop5.verbs[1]},
                  {value: 100, name: this.verbTop5.verbs[0]}
                ]
              }
            ]
          };

          option && myChart.setOption(option);
        }).catch(failResponse => {
        })
      },
      initObjectTop5() {
        let url = "/agent/behavior/objTop"
        this.$axios.get(url, {
          params: {
            agentOpenid: this.$route.query.id
          }
        }).then(successResponse => {
          this.objTop5 = successResponse.data
          let myChart = this.$echarts.init(this.$refs.object_top5);
          var option;

          option = {
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c}%"
            },
            legend: {
              data: this.objTop5.objs
            },

            series: [
              {
                name: '漏斗图',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: [
                  {value: 60, name: this.objTop5.objs[4]},
                  {value: 40, name: this.objTop5.objs[3]},
                  {value: 20, name: this.objTop5.objs[2]},
                  {value: 80, name: this.objTop5.objs[1]},
                  {value: 100, name: this.objTop5.objs[0]}
                ]
              }
            ]
          };

          option && myChart.setOption(option);
        }).catch(failResponse => {
        })
      },

      getAgent() {
        let that = this
        let url = "/api/agent/find/openId/" + this.$route.query.id
        this.$axios.get(url).then(successResponse => {

          that.agent = successResponse.data

        }).catch(failResponse => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.currentPage = 0
        this.getAccount()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getAccount()
      },
      getAccount() {
        let that = this
        let url = "/api/account/find"
        this.$axios.get(url, {
          params: {
            agentOpenId: this.$route.query.id,
            currentPage: this.currentPage - 1,
            pageSize: this.pageSize
          }
        }).then(successResponse => {

          that.accounts = successResponse.data.content

        }).catch(failResponse => {
        })
      }
    }
  }
</script>
<style>
  #head_card {
    margin-top: -2%;
    height: 300px;
    background: url("../../assets/background2.png") no-repeat;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right;
    background-size: 1500px 1000px;
  }
</style>
